import styled from "styled-components";
import * as antd from "antd";

export const Input = styled(antd.Input)``;
export const Icon = styled(antd.Icon)``;
export const Button = styled(antd.Button)``;

export const Register = styled.div`
  width: 100vw;
  height: 100vh;
  background-image: url(https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg);
  background-repeat: no-repeat;
  background-position: center 110px;
  background-size: 100%;
  background-color: rgb(240, 242, 245);

  padding-top: 20vh;
`;

export const Main = styled.div`
  width: 368px;
  margin: 0 auto;
`;

export const Title = styled.div`
  margin-bottom: 24px;

  color: rgba(0, 0, 0, 0.85);
  font-weight: 600;
  font-size: 33px;
  font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
  text-align: center;
`;

export const Form = styled.form`
  & ${Input} {
    /* margin-bottom: 24px; */
  }

  & ${Icon} {
    color: rgba(0, 0, 0, 0.45);
  }

  & ${Button} {
  }
`;

export const FormItem = styled(antd.Form.Item)``;

export const LoginBlock = styled.div`
  text-align: right;
`;

export const LoginText = styled.a`
  margin-top: 24px;
  display: inline-block;
`;
